
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="./bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="post()">我要发帖</span></header>
    <section>
        <ul id="postList"></ul>
    </section>
    <div class="post" id="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
        所属版块：<select id="sec"><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content" id="content"></textarea>
        <input class="btn" value="发布" onclick="postSuccess()">
    </div>
</div>
<script>
	function post(){
		document.getElementById("post").style.display="block";
	}
	var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
	
	function postSuccess(){
	    var newLi=document.createElement("li");   //创建一个新的li节点元素
	    var iNum=Math.floor(Math.random()*4);  //随机获取头像
	    var touDiv=document.createElement("div");   //创建头像所在的div节点
	    var touImg=document.createElement("img");  //创建头像节点
	    touImg.setAttribute("src","img/"+tou[iNum]);  //增加头像路径
	    touDiv.appendChild(touImg);      //将头像放在div节点中
	
	    var titleH1=document.createElement("h1"); //创建标题所在的标签h1
	    var title=document.getElementById("title").value;  //获取标题
	     titleH1.innerHTML=title;   //将标题内容放在h1标签中
	
	    var newP=document.createElement("p"); //创建一个新的p节点元素
	    var secName=document.createElement("span");
	    var secSelect=document.getElementById("sec").value;  //获取版块
	    secName.innerHTML="版块："+secSelect;    //把版块内容放到span中
	    var myDate=new Date();//创建日期对象,默认为当前系统时间
	    var currentDate=myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
	    var timeSpan=document.createElement("span");
	    timeSpan.innerHTML="发表时间："+currentDate;
	    newP.appendChild(secName);   //在p节点中插入版块
	    newP.appendChild(timeSpan);  //在p节点中插入发布时间；
	
	    newLi.appendChild(touDiv);  //插入头像
	    newLi.appendChild(titleH1);  //插入标题
	    newLi.appendChild(newP);  //插入版块、时间内容
	    var postList=document.getElementById("postList");
	    postList.insertBefore(newLi,postList.firstChild);   //把当前内容插入到列表最前面
	
	    document.getElementById("title").value="";    //标题设置为空
	    document.getElementById("content").value="";  //内容设置为空
	
	    document.getElementById("post").style.display="none";
	}
</script>
</body>
</html>